<template>
	<view class="points-container">
        <scroll-view scroll-y="true" :style="{height: scrollHeight}" :refresher-enabled="false" @scrolltolower="onScrolltolower">
            <view class="points-info">
                <view class="info-left u-flex-1 u-m-r-10">
                    <view class="u-m-b-20">
                        消费积分
                    </view>
                    <view class="u-m-b-20 points-num u-line-1">
                        {{ points.consum_point || 0 }}
                    </view>
                    <view class="u-m-b-20">
                        积分可以当钱花!
                    </view>
                </view>
                <view class="info-right u-flex-1 u-line-1 u-m-l-10">
                    <view class="u-m-b-20">
                        等级积分
                    </view>
                    <view class="u-m-b-20 points-num u-line-1">
                        {{ points.grade_point || 0 }}
                    </view>
                    <view class="u-m-b-20"></view>
                </view>
            </view>
            <view class="points-list">
                <view class="points-title u-text-center">
                    积分明细
                </view>
                <view class="">
                    <u-empty text="您还没有积分记录哦~" mode="list" v-if="!pointsList.length && finished"></u-empty>
                    <view class="points-item u-flex" v-for="(point, index) in pointsList" :key="index" v-else>
                        <view class="u-flex-1">
                            <view class="u-m-b-15">
                                {{ point.reason }}
                            </view>
                            <view class="points-time">
                                {{ point.time | date('yyyy-mm-dd hh:MM:ss') }}
                            </view>
                        </view>
                        <view class="u-text-right">
                            <view class="">
                                消费：{{ point.consum_point ? (point.consum_point_type ? '+' + point.consum_point : '-' + point.consum_point) : 0 }}
                            </view>
                            <view class="">
                                等级：{{ point.grade_point ? (point.grade_point_type ? '+' + point.grade_point : '-' + point.grade_point ) : 0 }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <loading-view v-if="loading"></loading-view>
	</view>
</template>

<script>
    import * as API_Members from '@/api/members.js'
	export default {
		data() {
			return {
                params: {
                    page_no: 1,
                    page_size: 10
                },
                points: '',      //积分
                pointsList: [],  //积分明细列表
                finished: false, //是否已加载完毕
                scrollHeight: '', //页面滚动高度
                loading: true
			}
		},
        onLoad() {
            this.scrollHeight = uni.getSystemInfoSync().windowHeight + 'px'
            this.getPoints()
            this.getPointsData()
        },
		methods: {
            // 获取消费积分、等级积分
            getPoints() {
                API_Members.getPoints().then(response => {
                    this.points = response
                })
            },
            //获取积分明细
            getPointsData() {
                API_Members.getPointsData(this.params).then(response => {
                    const { data } = response
                    if(data && data.length) {
                        this.pointsList = this.pointsList.concat(data)
                    } else {
                        this.finished = true
                    }
                    this.loading = false
                })
            },
            // 滚动加载更多数据
            onScrolltolower() {
                if(this.finished) return
                this.params.page_no += 1
                this.getPointsData()
            }
		}
	}
</script>

<style lang="scss" scoped>
    .points-container {
        .points-info {
            padding: 55rpx 40rpx;
            height: 400rpx;
            color: #FFFFFF;
            display: flex;
		    background: linear-gradient(145deg,#ff9000,#ff5000 77%);
            .points-num {
                font-size: 70rpx;
                font-weight: 600;
            }
            .info-left, .info-right {
                width: 300rpx;
            }
        }
        .points-list {
            background-color: #FFFFFF;
            border-radius: 20rpx;
            margin: -90rpx 30rpx 90rpx 30rpx;
            min-height: 800rpx;
            /deep/ .u-empty {
                margin-top: 200rpx !important;
            }
            .points-title {
                height: 90rpx;
                line-height: 90rpx;
                color: #ff5000;
                font-weight: 600;
            }
            .points-item {
                margin: 0 30rpx;
                padding: 30rpx 0;
                border-bottom: 2rpx solid #EEEEEE;
                &:last-child {
                    border-bottom: none;
                }
                .points-time {
                    font-size: 24rpx;
                    color: #878787;
                }
            }
        }
    }
</style>
